<template>
  <div class="item" :style="{ height: height + 'px' }">
    <div class="title">
      <span>name：{{ data.name }}</span>
      <span>第{{ data.index + 1 }}条</span>
    </div>
    <div class="content">{{ data.desc }}</div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  data: {
    type: Object,
    required: true as const
  },
  height: {
    type: Number,
    required: false as const
  }
});
</script>
<style scoped lang="scss">
.item {
  box-sizing: border-box;
  padding: 5px 10px;
  overflow: auto;
}
.title {
  display: flex;
  justify-content: space-between;
}
.content {
  word-break: break-all;
}
</style>
